<template>
  <div class="container">
    <div class="top">
      <div class="content">
        <div class="title">
          <div class="line"></div>
          <div class="title-text">行业自营出口</div>
        </div>
        <div id="myChart1" :style="{width: '100%', height: '326px'}"></div>
      </div>
      <div class="content content2">
        <div class="title">
          <div class="line"></div>
          <div class="title-text">国别自营出口</div>
        </div>
        <div id="myChart2" :style="{width: '100%', height: '326px'}"></div>
      </div>
    </div>
    <div class="bottom">
      <div class="bottom-title">
        <div class="line"></div>
        <div class="title">乡镇自营出口</div>
      </div>
      <div id="myChart3" :style="{width: '100%', height: '330px'}"></div>
    </div>
  </div>
</template>

<script>
const options3Value = [
  '22.34',
  '18.71',
  '19.31',
  '18.7',
  '19.72',
  '9.68',
  '8.61',
  '9.85',
  '2.34'
]

// 配置数据上方气泡
const markPointData = options3Value.map((item, index) => {
  return {
    value: item,
    coord: [index, item + 1]
  }
})

export default {
  name: 'Foreign',
  props: {
    list1: Array,
    list2: Array,
    list3: Array
  },
  data () {
    return {
      calucation: [],
      options1Data: [],
      options1DataToolTip: [],
      options3Value: [],
      options3Name: [],
      options2DataArray1: [],
      options2DataArray2: [],
      options2DataContinent: [
        '亚洲',
        '非洲',
        '欧洲',
        '拉丁美洲',
        '北美洲',
        '大洋洲'
      ]
    }
  },
  methods: {
    // 行业自营出口
    Industry () {
      const myChart1 = this.$echarts.init(document.getElementById('myChart1'))
      myChart1.setOption({
        color: [
          '#f76363',
          '#afa3f5',
          '#00d488',
          '#3feed4',
          '#3bafff',
          '#f1bb4c'
        ],
        // 鼠标悬停
        tooltip: {
          trigger: 'item', // 触发类型，默认数据触发，见下图，可选为：'item' ¦ 'axis'
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
            shadowStyle: {
              // 阴影指示器样式设置
              width: 'auto', // 阴影大小
              color: 'rgba(150,150,150,0.3)' // 阴影颜色
            }
          },
          textStyle: {
            color: '#333333'
          },
          formatter (p) {
            return p.marker + p.data.name + ':' + p.data.value + ' 万元'
          }
        },
        // 配置类别
        legend: {
          // 布局朝向
          orient: 'vertical',
          bottom: '6%',
          left: '2%',
          data: this.options1DataToolTip
        },
        grid: {
          left: '30%'
        },
        series: [
          {
            // 数据
            data: this.options1Data,
            // 显示类型
            type: 'pie',
            radius: ['40%', '70%'],
            // 布局偏移
            center: ['50%', '50%'],
            // 防止标签重叠
            avoidLabelOverlap: true,
            label: {
              show: false,
              position: 'outside'
            },
            // 配置鼠标悬停文字效果
            emphasis: {
              label: {
                show: true,
                fontSize: '16',
                fontWeight: 'bold'
              }
            },
            // 配置牵引线
            labelLine: {
              show: true,
              normal: {
                show: true,
                // 线条长度设置
                length: 20,
                length2: 24,
                lineStyle: {
                  color: '#333'
                }
              }
            },
            itemStyle: {
              normal: {
                label: {
                  show: true,
                  formatter: ' {d}% \n {b} '
                }
              }
            }
          }
        ],
        // 配置环形图中间的文字
        graphic: [
          {
            type: 'text',
            left: 'center',
            top: 'center',
            style: {
              text: '2021年各行业\n\n自营出口数据',
              textAlign: 'center',
              fill: '#333333', // 文字的颜色
              fontSize: 14,
              fontFamily: 'Microsoft YaHei'
            }
          }
        ]
      })
      window.addEventListener('resize', () => {
        myChart1.resize()
      })
    },
    service () {
      const myChart2 = this.$echarts.init(document.getElementById('myChart2'))
      myChart2.setOption({
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            }
          }
        },
        legend: {
          data: ['累积金额', '累积增速'],
          right: '7%',
          textStyle: {
            fontSize: 16
          }
        },
        xAxis: [
          {
            show: true,
            type: 'category',
            data: this.options2DataContinent,
            axisPointer: {
              type: 'shadow'
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#DCDCDC'
              }
            },
            // 影藏X轴线刻度
            axisTick: {
              show: false
            },
            // 设置轴线上的字体样式
            axisLabel: {
              textStyle: {
                fontSize: 13,
                color: '#333333'
              }
            }
          }
        ],
        grid: {
          left: '10%',
          top: 35,
          bottom: 35
        },
        yAxis: [
          {
            type: 'value',
            // y轴刻度线显示
            splitLine: {
              show: true,
              lineStyle: {
                type: 'dashed'
              }
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#DCDCDC'
              }
            },
            // min: 0,
            // max: 70,
            // interval: 10,
            axisLabel: {
              // 设置Y轴上的字体样式
              textStyle: {
                color: '#333333',
                fontSize: 10
              },
              formatter: '{value} 亿元'
            }
          },
          {
            type: 'value',
            splitLine: {
              show: false
            },
            nameTextStyle: {
              fontSize: 10,
              Color: 'red'
            },
            // min: 0,
            // max: 80,
            // interval: 10,
            axisLabel: {
              formatter: '{value} .00%',
              textStyle: {
                fontSize: 10,
                color: '#333333'
              }
            }
          }
        ],
        series: [
          {
            data: this.options2DataArray2,
            name: '累积金额',
            type: 'bar',
            barWidth: 27, // 设置柱子的宽度,
            barGap: '40px' /* 多个并排柱子设置柱子之间的间距 */,
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            itemStyle: {
              normal: {
                label: {
                  show: true, // 开启显示
                  position: 'top', // 在上方显示
                  textStyle: {
                    // 数值样式
                    color: '#333333',
                    fontSize: 10
                  }
                }
              }
            },
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: '#FFC65B' // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: '#FFA02A' // 100% 处的颜色
                }
              ],
              globalCoord: false // 缺省为 false
            }
          },
          {
            data: this.options2DataArray1,
            symbol: 'line',
            name: '累积增速',
            type: 'line',
            yAxisIndex: 1,
            itemStyle: {
              normal: {
                label: {
                  show: true, // 开启显示
                  position: 'top', // 在上方显示
                  textStyle: {
                    // 数值样式
                    color: '#333333',
                    fontSize: 10
                  }
                }
              }
            },
            color: '#2F73FB'
          }
        ]
      })
      window.addEventListener('resize', () => {
        myChart2.resize()
      })
    },
    cross () {
      const myChart3 = this.$echarts.init(document.getElementById('myChart3'))
      myChart3.setOption({
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            }
          },
          formatter (p) {
            return `${p[0].marker} ${p[0].value} 亿元`
          }
        },
        grid: {
          top: 30,
          bottom: 40
        },
        xAxis: {
          show: true,
          type: 'category',
          data: this.options3Name,
          axisPointer: {
            type: 'shadow'
          },
          axisLabel: {
            textStyle: {
              color: '#333',
              fontSize: 12
            }
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: '#DCDCDC'
            }
          },
          axisTick: {
            show: false
          }
        },
        yAxis: {
          type: 'value',
          // y轴刻度线显示
          splitLine: {
            show: true,
            lineStyle: {
              type: 'dashed'
            }
          },
          // min: 0,
          // max: 65,
          axisLine: {
            show: true,
            lineStyle: {
              color: '#DCDCDC'
            }
          },
          interval: 5,
          axisLabel: {
            formatter: '{value} 亿元  ',
            textStyle: {
              color: '#333333',
              fontSize: 12
            }
          }
        },
        series: [
          {
            data: this.options3Value,
            type: 'bar',
            // 配置气泡
            markPoint: {
              symbol: 'pin',
              symbolSize: 50,
              data: markPointData,
              itemStyle: {
                normal: {
                  label: {
                    show: true,
                    color: '#fff'
                  }
                }
              }
            },
            barWidth: 27, // 设置柱子的宽度
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: '#75B9F5' // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: '#188DF0' // 100% 处的颜色
                }
              ],
              globalCoord: false // 缺省为 false
            }
          }
        ]
      })
      window.addEventListener('resize', () => {
        myChart3.resize()
      })
    },
    getInfo1 () {
      const name = this.list1.map((item) => {
        return item.quota_name
      })
      const value = this.list1.map((item) => {
        return item.current_value
      })
      const calucation = this.list1.map((item) => {
        return item.calucation_caliber
      })
      const newArray = []
      for (let i = 0; i < name.length; i++) {
        const obj = {}
        obj.value = value[i]
        obj.name = name[i]
        newArray.push(obj)
      }
      this.options1Data = newArray
      this.options1DataToolTip = name
      this.calucation = calucation
      // console.log(this.calucation)
    },
    getInfo2 () {
      const array1 = []
      const array2 = []
      for (let i = 0; i < this.list2.length; i++) {
        // console.log(i)
        if (i % 2 === 0) {
          array2.push(this.list2[i])
        } else {
          array1.push(this.list2[i])
        }
      }
      this.options2DataArray1 = array1.map((item) => {
        return item.current_value
      })
      this.options2DataArray2 = array2.map((item) => {
        return item.current_value
      })
      // console.log(this.options2DataArray1)
    },
    getInfo3 () {
      const name = this.list3.map((item) => {
        return item.quota_name
      })
      const value = this.list3.map((item) => {
        return item.current_value
      })
      this.options3Value = value
      this.options3Name = name
    }
  },
  mounted () {
    this.getInfo1()
    this.getInfo2()
    this.getInfo3()
    this.Industry()
    this.service()
    this.cross()
  }
}
</script>

<style lang="scss" scoped>
.container {
  display: flex;
  flex-direction: column;

  .top {
    display: flex;
    flex-direction: row;
    margin-bottom: 20px;

    .content {
      display: flex;
      flex-direction: column;
      flex: 0.5;
      height: 360px;
      background: #ffffff;
      box-shadow: 0px -8px 39px 1px rgba(230, 230, 230, 0.5),
        0px 8px 39px 1px rgba(230, 230, 230, 0.5);
      border-radius: 20px;
      .title {
        width: 100%;
        display: flex;
        flex-direction: row;
        align-items: center;
        margin: 17px 0 10px 20px;
        .line {
          width: 7px;
          height: 24px;
          background: #1492ff;
          border-radius: 4px;
          margin-right: 7px;
        }
        .title-text {
          font-size: 20px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #333333;
        }
      }
    }
    .content2 {
      width: 588px;
      margin-left: 20px;
    }
  }
  .bottom {
    height: 358px;
    background: #ffffff;
    box-shadow: 0px -8px 39px 1px rgba(230, 230, 230, 0.5),
      0px 8px 39px 1px rgba(230, 230, 230, 0.5);
    border-radius: 20px;
    display: flex;
    flex-direction: column;

    .bottom-title {
      width: 100%;
      display: flex;
      flex-direction: row;
      margin: 17px 0 0px 20px;

      .line {
        width: 7px;
        height: 24px;
        background: #1492ff;
        border-radius: 4px;
        margin-right: 7px;
      }
      .title {
        font-size: 20px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #333333;
      }
    }
  }
}
</style>
